<template>
  <view class="content">
    <scroll-view
      scroll-y
      @scrolltolower="loadMore"
      @refresherrefresh="onRefresh"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      class="scroll-view"
    >
      <view
        class="card"
        v-for="(item, index) in cardList"
        :key="index"
        @click="handleCardClick(item)"
      >
        <view class="card-header">
          <image
            class="avatar"
            :src="item.userAvatar"
            mode="aspectFill"
          ></image>
          <text class="title">{{ item.title }}</text>
        </view>
        <view class="card-content">{{ item.content }}</view>
        <!-- 修改图片部分为轮播图 -->
        <swiper
          v-if="item.images && item.images.length"
          class="card-swiper"
          indicator-dots
          autoplay
          circular
        >
          <swiper-item v-for="(image, imgIndex) in item.images" :key="imgIndex">
            <image
              class="card-image"
              :src="image.url"
              mode="aspectFill"
            ></image>
          </swiper-item>
        </swiper>
        <view class="card-actions">
          <view class="action-item" @click="handleComment(index)">
            <up-icon name="chat" size="36rpx" color="#666"></up-icon>
            <text>{{ item.comments }}</text>
          </view>
          <view class="action-item" @click="handleLike(index)">
            <up-icon
              :name="item.isLiked ? 'thumb-up-fill' : 'thumb-up'"
              size="36rpx"
              color="#666"
            ></up-icon>
            <text>{{ item.likes }}</text>
          </view>
          <view class="action-item" @click="handleCollect(index)">
            <up-icon
              :name="item.isCollected ? 'star-fill' : 'star'"
              size="36rpx"
              color="#666"
            ></up-icon>
            <text>{{ item.collections }}</text>
          </view>
        </view>
      </view>
      <view class="load-more" v-if="hasMore">正在加载更多...</view>
      <view class="load-more" v-else>没有更多数据了</view>
    </scroll-view>

    <!-- 优化后的浮动添加按钮 -->
    <view class="float-button" @click="handleAdd">
      <u-icon name="plus" color="#ffffff" size="28"></u-icon>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const pubIco = uniCloud.importObject('hm-api');
const cardList = ref([]);
const isRefreshing = ref(false);
const hasMore = ref(true);
const page = ref(1);
const pageSize = 10;

const fetchData = async (refresh = false) => {
  if (refresh) {
    page.value = 1;
  }

  // 模拟API请求
  //await new Promise((resolve) => setTimeout(resolve, 1000));

  // const newData = Array.from({ length: pageSize }, (_, i) => ({
  //   id: page.value * 10 + i + 1,
  //   title: `标题${page.value * 10 + i + 1}`,
  //   avatar: 'https://via.placeholder.com/50',
  //   content: `这是卡片${
  //     page.value * 10 + i + 1
  //   }的内容，可以包含一些简短的描述或摘要。`,
  //   image: `https://picsum.photos/seed/${page.value * 10 + i + 1}/400/300`,
  //   comments: Math.floor(Math.random() * 100),
  //   likes: Math.floor(Math.random() * 200),
  //   collections: Math.floor(Math.random() * 50),
  //   isLiked: false,
  //   isCollected: false,
  // }));
  const res = await pubIco.getPublicationAllList({
    page: page.value,
    limit: pageSize,
  });
  console.log(JSON.stringify(res), 'res');
  if (refresh) {
    cardList.value = res.data;
  } else {
    cardList.value.push(...res.data);
  }

  // page.value++;
  // hasMore.value = cardList.value.length < 50; // 假设总共只有50条数据
};

const onRefresh = async () => {
  isRefreshing.value = true;
  await fetchData(true);
  isRefreshing.value = false;
};

const loadMore = async () => {
  if (!hasMore.value) return;
  await fetchData();
};

const handleComment = (index) => {
  console.log('评论卡片', index);
};

const handleLike = (index) => {
  const card = cardList.value[index];
  card.isLiked = !card.isLiked;
  card.likes += card.isLiked ? 1 : -1;
};

const handleCollect = (index) => {
  const card = cardList.value[index];
  card.isCollected = !card.isCollected;
  card.collections += card.isCollected ? 1 : -1;
};

const handleAdd = () => {
  console.log('点击了添加按钮');
  uni.navigateTo({
    url: '/pages/publish/publish',
  });
  // 在这里添加您的添加逻辑
};

const handleCardClick = (item) => {
  console.log('点击了卡片', JSON.stringify(item));
  return;
  uni.navigateTo({
    url: `/pages/detail/detail?id=${item._id}`,
  });
};

onMounted(() => {
  fetchData();
});
</script>

<style>
.content {
  padding: 20rpx;
}

.scroll-view {
  height: 100vh;
}

.card {
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
  padding: 20rpx;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
}

.card-content {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.card-image {
  width: 100%;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.card-actions {
  display: flex;
  justify-content: space-around;
}

.action-item {
  display: flex;
  align-items: center;
}

.action-item text {
  margin-left: 10rpx;
  font-size: 24rpx;
  color: #666;
}

.load-more {
  text-align: center;
  padding: 20rpx 0;
  font-size: 24rpx;
  color: #999;
}

.float-button {
  position: fixed;
  right: 30rpx;
  bottom: 50rpx;
  width: 110rpx;
  height: 110rpx;
  background: linear-gradient(135deg, #3b7aff, #6fa1ff);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6rpx 20rpx rgba(59, 122, 255, 0.4);
  transition: all 0.3s ease;
}

.float-button:active {
  transform: scale(0.95);
  box-shadow: 0 3rpx 10rpx rgba(59, 122, 255, 0.4);
}
.card-swiper {
  width: 100%;
  height: 400rpx; /* 根据需要调整高度 */
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.card-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}
</style>
